<template>
  <h2>遍历范围值</h2>
  <div>
    <span v-for="n in 10" :key="n">{{ n }}</span>
  </div>
  <h2>遍历对象</h2>
  <ul>
    <li v-for="value in student" :key="value">
      {{ value }}
    </li>
  </ul>
  <ul>
    <li v-for="(value, key, index) in student" :key="key">
      {{ index }}. {{ key }}: {{ value }}
    </li>
  </ul>
  <h2>解构遍历数组</h2>
  <ul>
    <li v-for="({ message }, index) in items" :key="message">
      {{ message }} {{ index }}
    </li>
  </ul>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const student = ref({
  name: '张三',
  grade: '三年级'
})
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>
